学习Vue.js-Day3

头像
SunPort6
    阅读 6 分钟
    2

    今天学习内容

    1. 点击按钮，显示文字（不使用动画）
    2. 使用过渡类名实现动画
    3. 修改V- 前缀
    4. 使用第三方类实现动画
    5. 使用钩子函数模拟小球半场动画
    6. 列表动画
    7. 创建组件的方式
    8. 组件中的data和methods
    9. 组件-why components data must be a function
    10. 组件切换方式

    准备工作

    1. Vue.js 类库
    2. animate.css 样式

    在开发过程中导入以上文件

    不使用动画

    通过 @click 的方式绑定事件 flag
    实现 点击按钮，显示文字的功能

    <body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
    <h3 v-if="flag">这是一个H3</h3>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

    使用过渡类名实现动画

      <style>
    /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
    /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    /* v-enter-active 【入场动画的时间段】 */
    /* v-leave-active 【离场动画的时间段】 */
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
    <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
    <!-- transition 元素，是 Vue 官方提供的 -->
    <transition>
      <h3 v-if="flag">这是一个H3</h3>
    </transition>
  </div>

    修改 V- 前缀

    修改官方提供的 v-enter 等前缀，实现 局部控制动画的效果

      <style>
    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

    .my-enter-active,
    .my-leave-active{
      transition: all 0.8s ease;
    }
  </style>

     <transition name="my"> 中的`my`对应上面的 `.my-enter`

     <input type="button" value="toggle2" @click="flag2=!flag2">
    <transition name="my">
      <h6 v-if="flag2">这是一个H6</h6>
    </transition>

    使用animate.css等第三方类实现动画

    要注意的是 通过在<transition> 标签下引用 enter-active-class="bounceIn
    并注明是animate 中的bounceIn

    <body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
    <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
      <h3 v-if="flag">这是一个H3</h3>
    </transition> -->

    <!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->
    <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
      <h3 v-if="flag" class="animated">这是一个H3</h3>
    </transition> -->

    <!-- 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置 入场的时长 和 离场的时长  -->
    <transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">这是一个H3</h3>
    </transition> 
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>

    使用钩子函数模拟小球半场动画

    应用场景： 在手机购物中，点击购物车按钮时，有小球进入到购物车的过程

    • 先写一个小球样式
     <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
    • 定义一个button 以及小球出现的位置
     <input type="button" value="加入到购物车" @click='flag=!flag'>
        <transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
            <div class="ball" v-show="flag">
        </transition>
    • 小球的出现时间，位置；以及小球到到底部后消失的效果。
     <script>

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
        // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
        beforeEnter(el){
          // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
          // 设置小球开始动画之前的，起始位置
          el.style.transform = "translate(0, 0)"
        },
        enter(el, done){
          // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
          // 可以认为 el.offsetWidth 会强制动画刷新
          el.offsetWidth
          // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = 'all 1s ease'

          // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
          done()
        },
        afterEnter(el){
          // 动画完成之后，会调用 afterEnter
          // console.log('ok')
          this.flag = !this.flag
        }
      }
    });
  </script>
</body>

    列表动画

    场景：添加id，name给一组列表，当点击列表时，列表删除
    重点：添加/删除 时列表数据的更新，以及出进场动画

     <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }

        li:hover {
            background-color: hotpink;
            transition: all 0.8s ease;
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }

        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
        .v-move {
            transition: all 0.6s ease;
        }
        .v-leave-active {
            position: absolute;
        }
    </style>

    因为要循环列表中的数据，在选用v-for时只能用transition-group标签包含

    <div id="app">

    <div>
      <label>
        Id:
        <input type="text" v-model="id">
      </label>

      <label>
        Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- <ul> -->
      <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
      <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
      <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
      <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
      <transition-group appear tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>
    <!-- </ul> -->

  </div>

    在实例VM中编写添加事件add,以及删除事件del

    <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '赵高' },
          { id: 2, name: '秦桧' },
          { id: 3, name: '严嵩' },
          { id: 4, name: '魏忠贤' }
        ]
      },
      methods: {
        add() {
          this.list.push({ id: this.id, name: this.name })
          this.id = this.name = ''
        },
        del(i) {
          this.list.splice(i, 1)
        }
      }
    });
  </script>
    animatevue.js
    SunPort6
    29 声望1 粉丝

    前端菜鸡/自强不息

    « 上一篇
    学习Vue.js-Day2
    下一篇 »
    关于'大热网'SEO及百度推广的研究（上）

    引用和评论

    推荐阅读
    头像
    Vue.js—单元测试

    SunPort6赞 2阅读 3k评论 1

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3k

    头像
    Vue 项目推荐使用这个图标库 vue-icons-plus

    破晓L赞 4阅读 1.8k评论 3

    头像
    从零开始搭建 Vue3 组件库开发环境

    zxl20070701赞 2阅读 611

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 288评论 1

    头像
    electron开发采坑小记

    aqiongbei赞 3阅读 7.8k评论 2

    0 条评论
    得票最新